<template>
  <div class="saomaLogin">
    <h2>扫码登录 安全快捷</h2>
    <div class="qr_box">
      <div class="qr">
        <img :src="imgUrl" alt="" />
        <!-- 遮罩层 -->
        <div class="qr_mask" :style="{ display: displayFlag }"></div>
        <div class="qr_help" :style="{ display: displayFlag }" @click="qrGuoqi">
          <p>二维码过期</p>
          <span>刷新</span>
        </div>
      </div>
    </div>
    <p>请使用网易云APP扫码登录</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import {
  setLocalStorgeItem,
  getLocalStorgeItem,
  deleteLocalStorgeItem,
  deleteLocalStorgeAll,
} from "../../../utils/storage";
import {
  productQrKey, // 生成一个二维码的key
  productQr, // 生成一个 二维码
  getUserInfoByQr, // 获取 扫码登录成功后的用户信息
  checkQr, // 检测 二维码的状态
} from "../../../api/saomaApi";
export default {
  name: "saomaLogin",
  components: {},
  data() {
    return {
      displayFlag: "none",
      key: "",
      imgUrl: "",
      timer: "",
      guoqi: 180,
    };
  },
  created() {
    this.productQrKeyMethod();
  },
  methods: {
    ...mapMutations("userStore", [
      "changeProfile",
      "changeCookie",
      "changeToken",
    ]),
    ...mapActions("userStore", ["getUserDetailActions"]),
    async productQrKeyMethod() {
      try {
        let result = await productQrKey();
        if (result.code === 200) {
          this.key = result.data.unikey;
          let resultSon = await productQr(this.key);
          if (resultSon.code === 200) {
            this.imgUrl = resultSon.data.qrimg;
            // 轮询 chenckQr 接口
            this.timer = setInterval(() => {
              this.checkQrMethod();
            }, 1000);
          }
        }
      } catch (error) {}
    },
    async checkQrMethod() {
      try {
        this.guoqi--;
        if (this.guoqi == 0) {
          this.displayFlag = "block";
          clearInterval(this.timer);
        }
        let result = await checkQr(this.key);
        console.dir(result);
      } catch (error) {
        console.dir(error);
        if (error.code === 803) {
          clearInterval(this.timer);
          await this.getUserInfoByQrMedthod();
          // 扫码成功
          this.$message({
            message: error.message,
            type: "success",
          });
          setLocalStorgeItem("cookie", error.cookie);

          /* 配合vuex */
          this.changeCookie(error.cookie);
          this.getUserDetailActions();

          this.$router.push(this.$route.query.path);
        }
      }
    },
    // 获取用户信息
    async getUserInfoByQrMedthod() {
      let result = await getUserInfoByQr();
      if (result.code === 200) {
        setLocalStorgeItem("profile", result.profile);
        /* 配合vuex */
        this.changeProfile(result.profile);
      }
    },
    qrGuoqi() {
      this.guoqi = 300;
      this.key = "";
      this.imgUrl = "";
      this.timer = "";
      this.displayFlag = "none";
      this.productQrKeyMethod();
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
    }),
  },
};
</script>

<style lang="less" scoped>
.saomaLogin {
  color: #333333;
  padding-top: 70px;
  font-size: 14px;
  h2 {
    text-align: center;
    font-weight: normal;
  }
  .qr_box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qr {
    position: relative;
    width: 180px;
    height: 180px;
    // background-color: red;
    margin: 30px 0;
    margin-top: 50px;
    > img {
      width: 180px;
      height: 180px;
    }
    .qr_mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .qr_help {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      text-align: center;
      font-size: 18px;
      span {
        display: block;
        background-color: @globalColor;
        border-radius: 8px;
        font-size: 14px;
        margin-top: 10px;
        padding: 3px 0;
        cursor: pointer;
      }
    }
  }
  > p {
    font-size: 12px;
    text-align: center;
  }
}
</style>
